
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>识别二维码</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<style type="text/css">
			body{margin: 0;}
			.module-content{
				min-width: 320px;
				max-width: 1000px;
				width: 100%;
				color: #000;
				margin: 0 auto;
				padding-left: 10px;
				box-sizing: border-box;
			}
			.module-head{
				text-align: center;
				font-weight: 500;
				margin: 0;
				font-size: 30px;
				height: 100px;
				line-height: 100px;
				color: #000;
			}
			.box h3{
				font-weight: 300;
				margin: 0;
				font-size: 20px;
				height: 60px;
				line-height: 60px;
				color: #000;
			}
			.url-box{
				height: 30px;
				line-height: 30px;
				font-size: 14px;
			}
			#file{
				position: absolute;
				width: 120px;
				height: 120px;
				opacity: 0;
				top: 0;
				left: 0;
				overflow: hidden;
				z-index: 10;
			}
		</style>
	</head>
	<body>
		<div class="module-content">
			<!--解析二维码-->
			<h1 class="module-head">解析二维码</h1>
			<div class="box" id="analytic" style="position: relative;">
				<h3>长按二维码解析</h3>
				<img id="showImg" src="https://img.alicdn.com/tfscom/TB1KWa4coz.BuNjt_bXwu3QmpXa.png"/>
				<p class="url-box" id="urlBox"></p>
			</div>
			<div class="box">
				<h3>上传二维码解析</h3>
				<div style="position: relative;">
					<img style="width: 120px;height: 120px;" src="tu.png"/>
					<input type="file" onchange="getUrl(this,'file-url')" name="" id="file" value=""/>
					<p class="url-box" id="urlBox"></p>
				</div>
			</div>
		</div>
		<script src="jquery-1.11.3.js"></script>
		<script src="llqrcode.js" type="text/javascript" charset="utf-8"></script>
		<script src="analyticCode.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//扩展移动端长按事件
			$.fn.longPress = function (fn) {

			　　let timer = null;
			　　let $this = this;

			 	return this.each(function (i,item) {
			 		
　                  $(item).on('touchstart', function (event) {
				　　		timer = setTimeout(fn, 600);
				　　});
				
				　　$(item).on('touchend', function (event) {
				　　		clearTimeout(timer);
				　　}, false);

			 	})
			　　
			}
			//阻止触发默认事件
			// window.ontouchstart = function (e) { e.preventDefault(); };
			//仅对当前元素进行阻止触发默认事件
			document.getElementById('showImg').ontouchstart = function (e) { e.preventDefault(); };
			
			function alertChange(param){
				if(param === 1){
					getUrl(document.getElementById('showImg'),'img-url');
				}else if(param === 2){
					analyticCode.getUrl('img-url',document.getElementById('showImg'),function(url){alert(url);});
				}else if(param === 3){
					analyticCode.getUrl('img-url',document.getElementById('showImg'),function(url){window.location.href = url;});
				}else if(param === 4){
					analyticCode.getUrl('img-url',document.getElementById('showImg'),function(url){window.open(url);});
				}else{
					return;
				}
				$('#addDiv').remove();
			}
			
			$('#showImg').longPress(function(){
			
				let str = '<div id="addDiv" style="position:absolute;top:110px;left:50px;z-index:10;background:#000;color:#fff;font-size:16px;text-align:center;width:180px;border-radius:5px;">'+
				'<p style="border-bottom:1px solid #fff;margin:0;height:50px;line-height:50px;" onclick="alertChange(1)">识别二维码</p>'+
				'<p style="border-bottom:1px solid #fff;margin:0;height:50px;line-height:50px;" onclick="alertChange(2)">弹出地址</p>'+
				'<p style="border-bottom:1px solid #fff;margin:0;height:50px;line-height:50px;" onclick="alertChange(3)">当前窗口打开地址</p>'+
				'<p onclick="alertChange(4)">新窗口打开地址</p>'+
				'</div>';
				$('#analytic').append(str);
			});

			function getUrl(e,param){
				analyticCode.getUrl(param,e,function(url1,url2){
					e.nextElementSibling.innerHTML = url1;
					e.previousElementSibling.src = url2;
				});
			}
			


			
			

		</script>
	</body>
</html>
